<template>
  <view class="containern">
    <!-- 列表项 -->
    <view class="item" :style="{ background: backgroundItem }" v-for="(item, index) in itemList" :key="item.id"
      @touchstart="onTouchStart(index, $event)" @touchmove="onTouchMove(index, $event)" @touchend="onTouchEnd(index)"
      @touchcancel="onTouchEnd(index)">
      <!-- 内容区域 -->
      <view class="content">
        <view class="content_left">
          <image v-if="item.type == 2" src="@/static/imgs/rest.png" mode="scaleToFill" />
          <image v-else src="@/static/imgs/nocturnal_sleep.png" mode="scaleToFill" />
          <view>
            <view style="font-size: 28rpx; margin-bottom: 10rpx">{{ item.hour }}小时</view>
            <view style="font-size: 24rpx">{{ item.start_time }}—{{ item.end_time }}</view>
          </view>
        </view>
        <view v-if="isShowEitn" class="content_right" :style="{ right: item.isSlided && isTouch ? '140rpx' : '40rpx' }"
          @click="eidtSleep(item.id, item.type, item.start_time, item.end_time)">
          <image src="@/static/imgs/edit_sleep.png" mode="scaleToFill" />
        </view>
      </view>
      <!-- 操作按钮区域 -->
      <view class="actions" :style="{ right: item.isSlided && isTouch ? '0' : '-140px' }">
        <view class="action delete" @click="deleteItem(item.id, item.type, index)">删除</view>
        <view class="xian" :style="{ background: item.isSlided && isTouch ? backgroundItem : '' }"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
const startX = ref(0)
const startY = ref(0)
const props = defineProps({
  itemList: {
    type: Array,
    default: () => [],
  },
  isShowEitn: {
    type: Boolean,
    default: true,
  },
  isTouch: {
    type: Boolean,
    default: false,
  },
  backgroundItem: {
    type: String,
    default: 'f3eaff',
  }
})
const emit = defineEmits(['deleteItem', 'eidtSleep'])
//触摸开始事件处理
async function onTouchStart(index, event) {
  console.log(props.isTouch)
  // 记录触摸起始位置
  startX.value = event.changedTouches[0].clientX
  startY.value = event.changedTouches[0].clientY
  // 关闭其他项的滑动状态
  props.itemList.forEach((item, i) => {
    if (i !== index) {
      item.isSlided = false
    }
  })
}
// 触摸移动事件处理
function onTouchMove(index, event) {
  // 计算滑动距离
  const moveX = event.changedTouches[0].clientX
  const moveY = event.changedTouches[0].clientY
  const offsetX = moveX - startX.value
  const offsetY = moveY - startY.value
  // 如果是水平滑动
  if (Math.abs(offsetX) > Math.abs(offsetY)) {
    // 阻止事件冒泡
    event.stopPropagation()
    event.preventDefault()
    // 更新列表项的滑动状态
    if (offsetX < -20) {
      props.itemList[index].isSlided = true
    } else {
      props.itemList[index].isSlided = false
    }
  }
}
// 触摸结束事件处理
function onTouchEnd(index) {
  // 重置起始位置
  startX.value = 0
  startY.value = 0
}
// 删除列表项
function deleteItem(id, type, index) {
  // 删除对应索引的列表项
  emit('deleteItem', id, type, index)
}
function eidtSleep(id, type, startTime, endTime) {
  console.log(startTime)
  console.log(endTime)
  emit('eidtSleep', id, type, startTime, endTime)
}
</script>

<style lang="scss" scoped>
.containern {
  width: 100%;
  font-family: PingFang SC, PingFang SC;
}

.item {
  position: relative;
  width: 702rpx;
  height: 152rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  background-color: #f3eaff;
  margin-bottom: 10px;
  border-radius: 20rpx;
  overflow: hidden;
}

.content {
  height: 152rpx;
  padding: 0 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  .content_left {
    display: flex;
    align-items: center;
    color: #333333;

    image {
      width: 72rpx;
      height: 72rpx;
      margin-right: 30rpx;
    }
  }

  .content_right {
    position: absolute;
    right: 40rpx;
    transition: right 1s ease;

    image {
      width: 28rpx;
      height: 27rpx;
    }
  }
}

.actions {
  position: absolute;
  top: 0;
  right: 20rpx;
  bottom: 0;
  width: 122rpx;
  background-color: #da180a;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 1s ease;
}

.xian {
  width: 20rpx;
  height: 152rpx;
  position: absolute;
  left: -10rpx;
  top: 0;
  transition: background-color 0.5s ease;
  border-radius: 10rpx;
}

.action {
  color: #ffffff;
  font-size: 28rpx;
}
</style>
